<%-- 
    Document   : listStocks
    Created on : 23-jul-2013, 22:54:09
    Author     : General
--%>

<!doctype html>
<html>
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    
    <%@include file="header.jsp" %>
    
    <body>
        <div id="main" class="container">
            <div class="row">
                <h3>Stock list</h3>
                
                <c:choose>
                    <c:when test="${!empty lstStock}">
                        
                         <script>
                             
                            $(function() {
                                $( ".modify-btn" ).button({
                                    icons: { primary: "ui-icon-pencil" }, text: false
                                });
                                $( ".delete-btn" ).button({
                                    icons: { primary: "ui-icon-closethick" }, text: false
                                });
                                $( ".add-btn" ).button({
                                    icons: { primary: "ui-icon-plusthick" }, text: false
                                });
                                
                                $("table tr:nth-child(even)").addClass("striped");
                            });
                         </script>

                        <table class="table table-bordered table-striped width50">
                            <thead>
                                <tr>
                                    <th>Symbol</th>
                                    <th>Name</th>
                                    <th>Desc</th>
                                    <th class="no-style"></th>
                                </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${lstStock}" var="stock">
                                <tr id="row_${stock.stock_id}">
                                    <td>
                                        ${stock.symbol}
                                    </td>
                                    <td>
                                        ${stock.name}
                                    </td>
                                    <td>
                                        ${stock.sumary}
                                    </td>
                                    <td  class="no-style">
                                        
                                        <!-- BEGIN MODIFY -->                                         
                                        <div id="popup-update" title="Modify Stock" class="nodisplay">
                                            <div id="popup-update-content" title="Modify Stock" class="nodisplay">
                                                
                                            </div>
                                        </div>
                                        
                                        <button class="modify-btn" onclick="showUpdateModal('${stock.symbol}')">Modify</button>
                                        <!-- END MODIFY -->
                                        
                                        <!-- BEGIN DELETE --> 
                                        <div id="dialog-confirm" title="Delete the item?" class="nodisplay" >
                                            <p style="height: 100px;">
                                                <span class="ui-icon ui-icon-alert dialog-confirm-text"></span>
                                                The item will be permanently deleted. Are you sure?
                                            </p>
                                        </div>
                                        
                                        <button class="delete-btn" onclick="showDeleteConfirmationModal(${stock.stock_id})">Delete</button>
                                        <!-- END DELETE -->
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </c:when>
                    <c:otherwise>
                        stocks list empty!
                    </c:otherwise>
                </c:choose>
                        
                <button class="add-btn" onclick="showAddModal();">Add</button>
                <div id="popup-add" title="Add New Stock" class="nodisplay">
                    <%@include file="stockForm.jsp" %>
                </div>
                
                <div id="dialog-message" title="Message" class="nodisplay">
                    <p>
                        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
                        Stock deleted successfully!!!
                    </p>
                </div>
            </div>
        </div><!-- id="main" -->
    </body>
</html>